<template>
	<view class="box">
		<!-- 背景颜色 -->
		<view class="bg">
			
		</view>
		<view class="list">
			<view class="title f-w">
				<view class="bold f32">{{type==1?'发现好货':(type==2?'分享商品':'收藏商品')}}</view>
				<view class="tag1"></view>
				<view class="f26 bold red">
					{{type==1?'口碑推荐':'得食材'}}
				</view>
			</view>
			<!-- 内容 -->
			<scroll-view scroll-y="true" class="scroll">
				<view class="card" v-for="(item,index) of list" :key="index" @click="goDetail(item.id)">
					<view class="content f-w">
						<view class="left">
							<view class="img f-w">
								<image :src="item.img" mode=""></image>
							</view>
						</view>
						<view class="right">
							<view class="one hide-line f28 bold">{{item.name}}</view>
							<view class="two fw-bt">
								<!-- 价格 -->
								<view class="f-w f24">
									<view class="red ">
										￥<text class="f30 bold">{{item.price}}</text>
									</view>
									<view class="c999 f24" v-if="type==1">秒杀价</view>
									<view class="c999 f28 line_through" v-if="type==2">￥{{item.old_price}}</view>
								</view>
								<!-- 购买按钮 -->
								<view class="cart1 f-w">
									<view class="cart1-jian f-w" @click.stop="cartDel(item.id,index)" v-show="item.buy_num>0">
										<image src="https://jw.xzsw2021.com/static/client/icon_83@2x.png" mode="widthFix"></image>
									</view>
									<input type="number" v-model="item.buy_num" v-show="item.buy_num>0">
									<view class="cart1-add f-w" @click.stop="cartAdd(item.id,index)">
										<image src="https://jw.xzsw2021.com/static/client/icon_84@2x.png" mode="widthFix"></image>
									</view>
								</view>
							</view>
							
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!--  -->
		<!-- <cart></cart> -->
	</view>
</template>

<script>
	import cart from '@/components/cart.vue'
	export default {
		components:{
			cart
		},
		data() {
			return {
				type:1,//1.发现好货 2.满汉分享商品 3.满汉收藏商品
				time:16*3600*1000,//倒计时时间
				list:[
					{
						shop_name:'菜市场',
						shop_img:'',
						name:'海南大香蕉  450-500g/份，图片仅供参考',
						price:3.5,
						old_price:16.8,
						num:0.8,//百分比
						buy_num:1,
					},
					{
						shop_name:'菜市场2',
						shop_img:'',
						name:'海南大香蕉  450-500g/份，图片仅供参考',
						price:99,
						old_price:135.8,
						num:0.7,//百分比
						buy_num:0,
					},
					{
						shop_name:'菜市场2',
						shop_img:'',
						name:'海南大香蕉  450-500g/份，图片仅供参考',
						price:99,
						old_price:135.8,
						num:0.7,//百分比
						buy_num:1,
					},
					{
						shop_name:'菜市场2',
						shop_img:'',
						name:'海南大香蕉  450-500g/份，图片仅供参考',
						price:99,
						old_price:135.8,
						num:0.7,//百分比
						buy_num:1,
					},
					{
						shop_name:'菜市场2',
						shop_img:'',
						name:'海南大香蕉  450-500g/份，图片仅供参考',
						price:99,
						old_price:135.8,
						num:0.7,//百分比
						buy_num:1,
					},
					{
						shop_name:'菜市场2',
						shop_img:'',
						name:'海南大香蕉  450-500g/份，图片仅供参考',
						price:99,
						old_price:135.8,
						num:0.7,//百分比
						buy_num:1,
					},
					{
						shop_name:'菜市场2',
						shop_img:'',
						name:'海南大香蕉  450-500g/份，图片仅供参考',
						price:99,
						old_price:135.8,
						num:0.7,//百分比
						buy_num:1,
					}
				],
				value: 0
			}
			
		},
		onLoad(options) {
			if(options.type){
				this.type=options.type
			}
			if(this.type==2){
				uni.setNavigationBarTitle({
					title:'分享商品'
				})
			}
			if(this.type==3){
				uni.setNavigationBarTitle({
					title:'收藏商品'
				})
			}
		},
		methods: {
			// 购物车减
			cartDel(id,index){
				console.log('减');
			},
			// 购物车加
			cartAdd(id,index){
				console.log('jia');
			},
			goDetail(id){
				let aa=this.type==1?'':'&orign='+this.type
				uni.navigateTo({
					url:'/pages/client/shop/shop-detail/shop-detail?id='+id+aa
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.box{
		.myimg{
			width: 100%;
			height: 100%;
		}
		.line_through{
			text-decoration: line-through;
		}
		.red{
			color: #F83535;
		}
		position: relative;
		.bg{
			position: absolute;
			width: 750rpx;
			height: 375rpx;
			background: linear-gradient(180deg, #109C7A 0%, #F5F5F5 100%);
		}
		.list{
			margin: 0 auto;
			position: relative;
			width: 690rpx;
			height: 100vh;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			padding: 0 30rpx;
			background-color: #fff;
			box-sizing: border-box;
			overflow: hidden;
			.title{
				margin: 15rpx 0 0;
				.tag1{
					margin: 0 10rpx;
					width: 2rpx;
					height: 26rpx;
					background: #333;
				}
			}
			.scroll{
				height: calc(100vh - 50rpx);
			}
			.card{
				// margin: 26rpx 0 0;
				.content{
					padding: 30rpx 0 30rpx;
					border-bottom: 1rpx solid #EEEEEE;
					.left{
						flex-shrink: 0;
						width: 190rpx;
						height: 190rpx;
						background-color: #18BC37;
						image{
							width: 100%;
							height: 100%;
							border-radius: 12rpx;
						}
					}
					.right{
						position: relative;
						flex: 1;
						margin-left: 15rpx;
						height: 190rpx;
						overflow: hidden;
						.two{
							margin: 104rpx 0 0;
							// align-items: flex-end;
							.c999{
								margin: 0 0 0 10rpx;
							}
						}
						.cart1{
							// width: 140rpx;
							height: 50rpx;
							input{
								width: 60rpx;
								margin: 0 10rpx;
								font-weight: 600;
								font-size: 28rpx;
								text-align: center;
							}
							.cart1-jian,.cart1-add{
								width: 40rpx;
								height: 40rpx;
								image{
									@extend .myimg;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
